<template>
  <div class="container">
    <Layout>
      <Content>
        <div class="nav" v-if="$route.path != '/addbrain' && $route.path != '/brainwave'">
          <ul class="category">
            <router-link
              :to="{path:`/device/nav/edit/${$router.history.current.params.id}`,params:{id:$router.history.current.params.id},query: {sortId:$router.history.current.query.sortId}}"
              class="device"
              tag="li">设备型号
            </router-link>
            <router-link
              :to="{path:`/device/nav/firmware/${$router.history.current.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="firmware"
              tag="li" replace>固件管理
            </router-link>
            <router-link
              :to="{path:`/device/nav/plugin/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="plugin"
              tag="li" replace>插件管理
            </router-link>
            <router-link
              :to="{path:`/device/nav/program/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="automatic"
              tag="li" replace>自动程序管理
            </router-link>
            <router-link
              :to="{path:`/device/nav/automatic/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="automatic"
              tag="li" replace>更多程序管理
            </router-link>
            <router-link
              :to="{path:`/device/nav/version/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              tag="li" replace>apk版本管理
            </router-link>
            <router-link
              :to="{path:`/device/nav/data/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="data" tag="li"
              replace>数据统计
            </router-link>
            <router-link
              :to="{path:`/device/nav/maintenance/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="data" tag="li"
              replace>保养配置
            </router-link>
            <!-- <router-link
              :to="{path:`/device/nav/brainwave/${$route.params.id}`,params:{id:$router.history.current.params.id},query: $router.history.current.query}"
              class="data" tag="li"
              replace>脑波管理
            </router-link> -->
          </ul>
        </div>
        <div class="right">
          <keep-alive>
            <router-view/>
          </keep-alive>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script lang="ts">
  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
  import {Route} from 'vue-router';
  import {NavBloc} from './NavBloc';
  import {FormBloc} from '@/view/device/FormBloc';

  @Component({})
  export default class extends Vue {
    bloc = new NavBloc()

    beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
      next(vm => {
        vm.bloc.sortId = Number(vm.$route.query.sortId);
        vm.bloc.getModel(vm.idx)
          .then(res => {
            vm.bloc.modelId = vm.idx
            vm.bloc.sortId = res.data.sortId
            // if (vm.$route.query.sortId === undefined) {
            //   vm.$router.redirect(
            //     `/device/nav/edit/${vm.idx}?sortId=${vm.bloc.sortId}`
            //   )
            // }
          })
      });
    }

    get idx() {
      return Number(this.$route.params.id);
    }

    mounted() {

    }
  }
</script>
<style lang="less" scoped>
  .container {
    padding-top: 20px;
  }

  .nav {
    width: 100%;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 1);
    // height: 50px;
    border: 1px solid rgba(242, 242, 242, 1);

    .category {
      li {
        // float: left;
        display: inline-block;
        cursor: pointer;
        padding: 17px 0px 12px 50px;
        width: 150px;
        position: relative;

        &:nth-child(4) {
          padding: 17px 0px 12px 50px;
          width: 184px;
        }
      }

      .router-link-active {
        border-bottom: 1px solid blue;
      }
    }
  }

  .right {
    min-height: 630px;
  }

  /deep/ .ivu-layout {
    background-color: rgba(255, 255, 255, 1);
  }

</style>
